<template>
	<navbar title="登录" :isBack="true"></navbar>
	<view class="content flex-direction-column" :style="{ height: tools.clientTopHight() }">
		<view class="top">
			<!-- <view style="margin-bottom: 30rpx;">
	 	<image src="/static/logo.png"></image>
	 </view> -->
			<text>骓目文化Dream</text>
			<view class="middle flex">
			 
				<text>授权将获取您的公开信息（头像、昵称等）注册登录</text>
			</view>
			<!-- <text>潮物云店铺</text> -->
			<view class="avatarName_body" v-if="info.show">
				<view class="header_item">
					<view class="xingbie">点击修改头像</view>
					<view style="width: 100rpx;">
						<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="btnImage">
							<image class="Image_avatar"
								:src="info.params.avatarUrl ? info.params.avatarUrl : 'https://ykp-hz.oss-cn-hangzhou.aliyuncs.com/4e65404b-d6e7-4244-9917-1176f56f0b2c.png'"
								mode="aspectFill"></image>
						</button>
					</view>

				</view>
				<view class="lineC"></view>
				<view class="header_item">
					<view class="xingbie">点击修改昵称</view>
					<input type="nickname" style="text-align: right;width: 100%;" v-model="info.params.nickName"
						placeholder="请输入昵称" placeholder-class="place" @change="getNickname" />
				</view>
			</view>
		</view>

		<view class="bottom flex-direction-column">
			<view class="btn flex" v-if="!info.show" @click="getUserInfo">
				<!-- <image src="/static/icon/22.png"></image> -->
				<text>授权登录</text>
			</view>
			<button v-if="info.show" class="btn" open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber">注册登录</button>
			<view class="btn flex" @click="backClick"> 暂不登录 </view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { getLogin, getSmallMobile, getXcxReg } from '@/service/api/index'
	import tools from '@/utils/tools'
	import userPinia from '@/store/user'
	const user = userPinia()

	let info = reactive({
		show: false,
		params: {
			avatarUrl: "",
			nickName: ""
		},
		userInfo: {}
	})
	onLoad((opt) => {
		if (opt.user_id && opt.id) {
			console.log(123);
		}
	})
	//获取头像
	const onChooseAvatar = (e:any) => {
		uni.showLoading({
			title: '图片上传中'
		});
		let img = e.detail.avatarUrl
		console.log(img);
		tools.getOssUrl([img]).then((res:any)=>{
		  info.params.avatarUrl = res; 
			tools.showToast('上传成功')
		}).catch((err)=>{
			tools.showToast('上传失败')
		})
	 
		uni.hideLoading()
	 
	}
	//获取昵称
	const getNickname = (e)=>{
		info.params.nickName = e.detail.value
	}
	// 获取用户信息
	const getUserInfo = () => {
		uni.getUserProfile({
			desc: '登录',
			success: (res) => {
				info.userInfo = res.userInfo
				// 获取code
				loginCode()
			}
		})
	}

	// 获取code
	const loginCode = () => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				getLoginApi(res.code)
			}
		})
	}

	// 手机号 授权框
	const getPhoneNumber = (e) => {
		info.params = { ...e.detail, ...info.params }
		// 获取手机号
		getSmallMobileApi()
	}

	// 暂不登录
	const backClick = () => {
		tools.navTo('/pages/home/index', 3)
	}



	// 获取手机号
	const getSmallMobileApi = async () => {
		const { msg } = await getSmallMobile(info.params)
		info.params = { ...msg, ...info.params }
		// 注册
		getXcxRegApi()
	}

	// 登录
	const getLoginApi = async (code : string) => {
		const res : { code : number; msg } = await getLogin({ code })
		// 新用户
		// if (res.code == 1) return setStorage('登录成功', res.msg)
		if (res.code == 1) {
			tools.setStorage<string>('token', res.msg)
			tools.navTo('', 2)
			return
		}
		info.show = true
		info.params = { ...res.msg, ...info.userInfo }
	}

	// 注册
	const getXcxRegApi = async () => {
		const { msg } = await getXcxReg(info.params)
		tools.setStorage<string>('token', msg)
		tools.navTo('', 2)
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 0 60rpx;
		justify-content: center;

		.top {
			// height: 60rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 20rpx;

		 

			text {
				height: 60rpx;
				line-height: 60rpx;
				font-size: 44rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}

		.middle {
			margin-top: 90rpx;
			align-items: center;

			span {
				width: 8rpx;
				height: 8rpx;
				background-color: #000;
				border-radius: 50%;
				margin-right: 10rpx;
				border: none;
			}

			text {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.bottom {
			.btn {
				width: 612rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 36rpx;
				border-radius: 100rpx;
				justify-content: center;
				align-items: center;
				margin-top: 80rpx;

				&:nth-child(1) {
					color: #fff;
					background: #000;

					image {
						width: 50rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}
				}

				&:nth-child(2) {
					color: #888888;
					border: 1px solid #dddddd;
				}
			}
		}
	}
	.avatarName_body{
		padding:0rpx 75rpx;
		margin-top: 20rpx;
	}
	.header_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.lineC {
		width: 100%;
		background-color: #EEEEEE;
		height: 1rpx;
		margin: 30rpx 0;
	}
	
	.xingbie {
		white-space: nowrap;
		width: 240rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #000000;
		opacity: 1;
	}
  :deep(.btnImage){
		width: 100rpx;
		height: 100rpx;
		background-color: white;
		padding: 0 !important;
	}
	:deep(.btnImage::after)  {
		border: 0;
	}
	.Image_avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>